<template>
  <div class="background-processer">
    <styled-uploader v-if="!value" @success="onImageUploaded"></styled-uploader>
    <image-processer v-else v-model="value" show-delete @change="handleUploadUrl"></image-processer>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { getImageDimensions } from '@/utils/utils'

const props = defineProps<{ modelValue: string }>()
const emit = defineEmits(['change'])

const value = computed(() => props.modelValue)

const onImageUploaded = (data: { url: string; file: File }) => {
  ElMessage.success('上传成功')
  getImageDimensions(data.file).then(({ width, height }) => {
    console.log(`图片宽度：${width}`)
    console.log(`图片高度：${height}`)
    // const maxWidth = 373
    // props.width = (width > maxWidth ? maxWidth : width) + 'px'
    emit('change', { url: data.url, height })
  })
}

const handleUploadUrl = (url: string) => {
  emit('change', { url })
}
</script>
<style lang="scss" scoped></style>
